<template>
	<view class="container">
		<z-paging ref="paging" v-model="dataList" :auto-clean-list-when-reload="false"
			:auto-scroll-to-top-when-reload="false" @query="queryList">
			<!-- 背景图 -->
			<view class="nft_card_bg">
				<image src="../../static/images/nft/nft_header_bg.png" mode=""></image>
			</view>
			<view class="nft_card">
				<!-- 顶层滚动 -->
				<view class="top_notice">
					<u-notice-bar :text="notice" bgColor="var(--echo-nft-bg-color)" color="#fff"></u-notice-bar>
				</view>
				<!-- 顶部导航 -->
				<view class="header_nav">
					<view class="icon_box" v-for="item in headerNavList" :key="item.id" @click="turnPage(item.to)">
						<!-- 图标 -->
						<view class="icon">
							<image :src="item.iconSrc" mode=""></image>
						</view>
						<!-- 文字 -->
						<view class="icon_text">
							{{ item.iconText }}
						</view>
					</view>
				</view>
				<!-- 标题 -->
				<view style="z-index: 100;position: sticky;top :0; background: var(--echo-nft-bg-color);">
					<!-- tabs切换 -->
					<z-tabs @change="changeTab" :list="tablist" active-color='var(--echo-main-color)'
						bg-color="var(--echo-nft-bg-color)"></z-tabs>
				</view>
				<!-- nft展示 -->
				<view class="nft_lists_card">
					<BsinNft v-for="item in dataList" :key="item.serialNo" :item="item" @toDetail="toDetail"></BsinNft>
				</view>
			</view>
		</z-paging>
	</view>
</template>
<script>
	import {
		getNftGoodsList
	} from '@/config/nft.js';
	export default {
		data() {
			return {
				tenantId: getApp().globalData.tenantId,
				notice: 's11e-DAO web3.0的施工队!',
				// 头部列表
				headerNavList: [{
						iconSrc: '../../static/images/nft/portrait.png',
						iconText: '创作中心',
						to: 'create',
						id: 1
					},
					{
						iconSrc: '../../static/images/nft/equity.png',
						iconText: 'NFT权益',
						to: 'equity',
						id: 2
					}, {
						iconSrc: '../../static/images/nft/box.png',
						iconText: 'NFT盲盒',
						to: 'blindBox',
						id: 3
					}
				],
				// tab列表
				tablist: [{
					name: 'NFT主题',
				}, {
					name: 'NFT身份',
				}],
				dataList: []
			}
		},

		methods: {
			queryList(pageNo, pageSize) {
				getNftGoodsList({
					tenantId: this.tenantId,
					pageNo,
					pageSize
				}).then(res => {
					this.$refs.paging.completeByTotal(res.data, res.pagination.totalSize);
				})
			},

			changeTab() {

			},

			// 关闭按钮
			onNavigationBarButtonTap({
				signType
			}) {
				if (signType == 'close') {
					plus.runtime.quit()
				}
			},

			// 分发事件
			turnPage(to) {
				switch (to) {
					case 'create':
						uni.$u.toast('正在开发中，敬请期待');
						return
					case 'equity':
						uni.navigateTo({
							url: "/pages/Nft/NftEquity"
						})
						break;
					case 'blindBox':
						uni.navigateTo({
							url: "/pages/Nft/NftBlindBox"
						})
						break;
				}
			},
			// nft详情页面
			toDetail(serialNo) {
				uni.navigateTo({
					url: `/pages/Nft/NftDetail?serialNo=${serialNo}`
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	.container {
		background-color: $echo-nft-bg-color;
		/* 确保没有高度的时候也会100% */
		min-height: 100vh;

		// nft头部背景
		.nft_card_bg {
			height: 400rpx;

			image {
				width: 101%;
				height: 100%;
			}
		}

		.nft_card {
			position: relative;
			top: -100rpx;
			border-top-left-radius: 80rpx;
			border-top-right-radius: 80rpx;
			background-color: $echo-nft-bg-color;

			.top_notice {
				width: 80%;
				margin: 0 auto;
			}

			.header_nav {
				padding: 20rpx 0 40rpx 0;
				margin: 0 70rpx;
				display: flex;
				justify-content: space-between;
				border-bottom: 2px dashed #ccc;

				.icon_box {
					height: 120rpx;
					text-align: center;

					.icon {
						width: auto;
						height: 90rpx;
						border-radius: 50%;

						image {
							width: 80rpx;
							height: 80rpx;
						}
					}

					.icon_text {
						color: #ccc;
					}
				}
			}

			.nft_lists_card {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				padding: 30rpx;
			}
		}

		::v-deep .u-tabs__wrapper__nav__line {
			display: none;
		}
	}
</style>
